<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="supper">
        <div id="container">
            <div id="box1">box1</div>
            <div id="box2">box2</div>
            <div id="box3">box3</div>
        </div>
    </div>

</body>

<script>


    /**
     * 获取子元素
     *   children
     * 获取父级元素
     *   parentElement
     * 兄弟元素
     *   nextElementSibling
     * */

     var container = document.getElementById('container');
     console.log(container.children);
     for(var i in container.children){
           //console.log(container.children[i].innerHTML);
         container.children[i].innerHTML = 'new box'+(i+1);
     }
     var box2 = document.getElementById('box2');
    // console.log(box2.parentElement);
     console.log(box2.parentElement.parentElement);
     console.log(box2.nextElementSibling);

     //box2.parentElement.innerHTML = 'empty';


</script>

</html>